<template>
{{#if ctrl.psSysPFPlugin}}
    {{> @macro/plugins/widget/widget-use.hbs appPlugin=ctrl.psSysPFPlugin}}
{{else}}
    <div :id="controlID" :name="model.codeName" :class="classNames" style="{{#if ctrl.width}}width: {{ctrl.width}}px;{{/if}}{{#if ctrl.height}}width: {{ctrl.height}}px;{{/if}}">
        <AppDashboard :noPadding="noPadding" :layoutOpts="{{> @macro/common/layoutPos.hbs layout=ctrl.psLayout layoutPos=ctrl.psLayoutPos}}">
            {{#each ctrl.psControls as | portlet |}}
            <{{portlet.codeName}}Portlet
                name="{{portlet.name}}"
                :context="store.context"
                :viewParams="store.viewParams"
                :pLoadingHelper="store.loadingHelper"
                :pViewCtx="store.viewCtx"
                @ctrl-init="(name:string, ability:any) => { handleCtrlInit(controller, name, ability) }"
                @ctrl-action="(name:string, action:any, data:any) => { handleCtrlAction(controller, name, action, data) }"
                @ctrl-destroy="(name:string, data:any) => { handleCtrlDestroy(controller, name, data) }"
            ></{{portlet.codeName}}Portlet>
            {{/each}}
        </AppDashboard>
    </div>
{{/if}}
</template>
<script setup lang="ts">
// 基于template/src/widgets/\{{appEntities}}/\{{ctrls@DASHBOARD}}-dashboard/\{{spinalCase ctrl.codeName}}-dashboard.vue.hbs生成
{{> @macro/plugins/widget/widget-import.hbs ctrl=ctrl}}
import { AppDashboard } from '@components/widgets/dashboard';
import { model } from './{{spinalCase ctrl.codeName}}-dashboard-model';
import { DashboardActionType, IDashboardController, DashboardController, IContext, IDashboardAbility, IDashboardControllerParams, IDashboardStore, IParam, createUUID, ILoadingHelper, IViewAbility, IViewCtx } from '@/core';
import { 
    useNavParamsBind, 
    useEventBind,
    handleCtrlInit, 
    handleCtrlAction,
    handleCtrlDestroy,
    getCtrlClassNames, 
    handleComponentAction 
} from '@/hooks/use-ctrl';

{{> @macro/widgets/dashboard/import-item.hbs ctrls=ctrl.psControls dashboard=ctrl}}

// 输入参数
{{> @macro/widgets/ctrl/ctrl-props.hbs
    props="openView?: Function;
    newView?: Function;
    noPadding?: boolean;"
    propsDefault="noPadding: false,"
}}

// emit
{{> @macro/common/emit.hbs name="ctrl" actionType="DashboardActionType" ability="IDashboardAbility"}}    

//  部件样式名
const classNames = computed(() => {
    const classNames = getCtrlClassNames(model, props);
    Object.assign(classNames, {
        [`app-control-dashboard`]: true,
    });
    return classNames;
});

const controlID = 'id' + createUUID();    

const params: IDashboardControllerParams<DashboardActionType,IDashboardAbility> = {
    name: props.name,    
    model,
    evt,
    controlID,    
    actions: {},
    openView: props.openView,
    newView: props.newView,    
    closeView: props.closeView, 
    pViewCtx: props.pViewCtx,   
    handler: (data: IDashboardStore) => { return reactive(data); }
};

//  数据看板控制器
{{> @macro/common/controller.hbs name="ctrl" IController="IDashboardController" store="IDashboardStore" ability="IDashboardAbility" controller="DashboardController"}}

const handleViewInit = (name: string, data: IViewAbility) => {
    console.log('视图初始化完成', name, data);
    controller.setSubAbility(name, data);
}
</script>